$(function(){
	/*留言板板块*/
   var Btn=$('.release button');
   var inUsername=$('.your_name input');
   var imgUser=$('.your_name img');
   var tarea=$('.message_say textarea');
   var imgUrl=null;
   var NumFloor=10;
   var numCount=0;/*文本域中的字符串长度*/
   var numBer=250;/*还能输入的字数*/
   
    /*获取留言头像*/
	$(imgUser).each(function(i) {
	    $(this).click(function(){
	       imgUser.css('border-color','#B7E7FF');
	       $(this).css('border-color','#0D8BE3')
           imgUrl=$(this).attr('src').substr('images');
         })	 

	});
    
    /*判断字数*/
    tarea.keyup(function(){
    	numCount=0;
    	var s=0;
         for(i=0;i<tarea.val().length;i++){
         	var a=tarea.val().charAt(i);
         	   s=a.match(/[^\x00-\xff]/ig) ? 1 : 0.5;
         	   numCount=s+numCount
         }
         numBer= Math.floor(250 - numCount);
         numBer >=0 ? ($('.wr_nontice').html('还可以输入'),$('.notice').css('color','black')) 
         : ($('.wr_nontice').html('超出'),$('.notice').css('color','red'),numBer=-numBer)
         $('.number').html(numBer)  
    });

   

   var data=null;
   var str='';  
   var datNum=Object;
   var Datenow=null;
   var message='';
   var listArr=[];
   Btn.click(function(){

   	  /*判断是用户名及留言是否正确*/
   	  if(inUsername.val().match(/^$/ig)){
   	  	  alert('请输入姓名');
   	  	  return false;
   	  }
   	    else if(!inUsername.val().match(/^[^\s]{2,8}$/)){
   	 	    alert('请输入2-8位数，下划线、字母、数字或汉字');
   	 	    return false;
   	  }
        else if(tarea.val().match(/^$/ig)){
        	alert('说点什么吧');
        	return false;
      }
        else if(imgUrl==null){
            alert('请选择头像');
       	  	return false;
      } else if(numCount>250){
      	    alert('请调整您的字数');
      	    return false;
      }

    /*计算第N楼*/
     NumFloor=$('.message_list li').length+1;
     console.log(NumFloor)
  
     
    /*获取时间*/
    Datenow=(new Date()).getTime();

    
   
    //存储数据
    var message=localStorage.getItem('message')
    str='{"imgUrl":"'+imgUrl+'","inUsername":"'+inUsername.val()+'","NumFloor":"'+NumFloor+'","tarea":"'+tarea.val()+'","imgUrl":"'+imgUrl+'","nowTime":"'+Datenow+'"}';
      //判断本地是否存在message字段
    if (localStorage.getItem('message')){
        //获取数据
        listArr=JSON.parse(localStorage.getItem('message')); 
        // 存入数组
        listArr.push(str);
        // 存入本地
        localStorage.setItem('message',JSON.stringify(listArr));
    }else{
         // push第一条数据
         listArr.push(str);
          //listArr.push(JSON.parse(str));
        localStorage.setItem('message',JSON.stringify(listArr));
    }
    // localStorage.clear();
    nowDate=JSON.parse(str)
    setLi(nowDate,NumFloor)
        
        /*清空文本域*/
        tarea.val('')

   })
   function setLi(data,num){ 
	   	function datNum(Dnum){   
		    var nowTime=new Date(Dnum);
		    var M = nowTime.getMonth()+1;
		    var D = nowTime.getDate();
		    var H = nowTime.getHours();
		    var Min= nowTime.getMinutes();
		    function p(n){
		    	n=n >= 10 ? n : "0"+n;
		    	return n;
		    }
		    var pubTime=p(M)+"月"+p(D)+"日 "+p(H)+":"+p(Min);
	        return pubTime;
	    }
		arr=[
		    '<li>',
		 		'<img src="'+data.imgUrl+'" alt="" class="item_img">',
		 		'<div class="message_wr">',
		 			'<div class="title_item">',
		 				'<span class="username">'+data.inUsername+'</span>',
		 				'<span><img src="images/level.png" alt="" class="title_ico"></span>',
		 				'<span>第<i>'+num+'</i> 楼</span>',
		 			'</div>',
						'<p>'+data.tarea+'</p>',
						'<p class="item_time">'+datNum(parseInt(data.nowTime))+'</p>',
		 		'</div>',
		 	'</li>'
		];
		$('.message_list').prepend(arr.join(''));
    }
    function setList(){
    	var messageArr=JSON.parse(localStorage.getItem('message'));
    	if(messageArr){
	    	var mLength=messageArr.length;
	    	for(var i=0;i<mLength;i++){
	    		
	            setLi(JSON.parse(messageArr[i]),i+1);
	    	}
    	}else{
           return;
    	}
    }
    setList()

})